<template>
  <div>
    <el-dialog
      title="用户信息详情"
      class="detailDialog"
      top="5vh"
      :visible.sync="detailVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="55%"
    >
      <common-info-table class="until">
        <div class="header">用户信息</div>
        <div class="cell">
          <common-info-table-cell
            v-for="(i, index) in userInfo"
            :key="index"
            :label="i.label"
            :width="i.width"
          >
            {{ i.value }}
          </common-info-table-cell>
        </div>
      </common-info-table>
      <template>
        <div class="title">
          <div></div>
          决策详情
        </div>
        <el-table
          :data="decisionTableData"
          :header-cell-style="{
            background: '#a8a7a7',
            color: '#fff',
          }"
          border
          style="width: 100%"
        >
       
          <el-table-column
            type="index"
            width="45"
            label="序号"
          ></el-table-column>
          <el-table-column prop="decisionPointName" label="决策场景" width="180">
          </el-table-column>
          <el-table-column prop="policyName" label="关联决策策略">
          </el-table-column>
        </el-table>
      </template>
      <template>
        <div class="title">
          <div></div>
          风险记录
        </div>
        <el-table
          :data="tableData"
          :header-cell-style="{
            background: '#a8a7a7',
            color: '#fff',
          }"
          border
          max-height="180px"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="45"
            label="序号"
          ></el-table-column>
          <el-table-column prop="riskSceneName" label="风险场景" width="100">
          </el-table-column>
          <el-table-column prop="riskRuleName" label="风险规则" width="100">
          </el-table-column>
          <el-table-column
            prop="minusScore"
            label="扣分情况"
            width="78"
          ></el-table-column>
          <el-table-column
            prop="matchTime"
            label="触发时间"
            show-overflow-tooltip
            width="170"
          >
            <template v-slot="scoped">
              {{ getTimeStr(scoped.row.matchTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作">
            <template v-slot="scoped">
              <el-button @click="seeRizhi(scoped.row.id)" type="text" size="small"
                >原始日志详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">返 回</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="原始日志详情"
      class="detailrizhiDialog"
      :visible.sync="detailrizhiVisible"
      :before-close="handlerizhiClose"
      :close-on-click-modal="false"
      width="45%"
    >
      <template>
        <!-- <div class="title">
          <div></div>
          日志记录详情
        </div> -->
        <el-table
          :data="tablerizhiData"
          :header-cell-style="{
            background: '#a8a7a7',
            color: '#fff',
          }"
          border
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="45"
            label="序号"
          ></el-table-column>
          <el-table-column prop="operatorAccount" label="主账号" width="100">
          </el-table-column>
          <el-table-column prop="requestIp" label="用户IP" width="100">
          </el-table-column>
          <el-table-column prop="operateTime" label="登录时间" width="160"> </el-table-column>
          <el-table-column prop="action" label="操作类别"> </el-table-column>
          <el-table-column prop="result" label="登录结果"> </el-table-column>
        </el-table>
      </template>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlerizhiClose">返 回</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getdecisionList, getriskList,gettablerizhiDataList } from "@/api/yybl/userInfo";
import dayjs from "dayjs";
export default {
  name: "rule",
  components: {},
  props: {
    detailVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      userInfo: [],
      tableData: [],
      decisionTableData: [],
      tablerizhiData: [],
      detailrizhiVisible: false,
    };
  },
  watch: {},
  computed: {
    ...mapState("common", ["trustLevelList"]),
  },
  methods: {
    getTimeStr(val) {
      return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
    },
    async detail(row) {
      // 调用详情接口,数据处理
      this.userInfo = [
        {
          label: "用户名称",
          value: row.userCode,
          width: "50%",
        },
        {
          label: "姓名",
          value: row.userName,
          width: "50%",
        },
        {
          label: "用户总分",
          value: row.trustScore,
          width: "50%",
        },
        {
          label: "用户等级",
          value: this.$getOptionLabel(row.trustLevel, this.trustLevelList),
          width: "50%",
        },
      ];
      await this.getTableData(row.userId);
      await this.getdecisionTableData(row.trustLevel);
      // this.tableData = [
      //   {
      //     senceName: "异常时间登录",
      //     senceRule: "超级规则",
      //     koufen: "已扣60分，剩余40分",
      //     biaodashi: "2024-03-11 16:13:22",
      //   },
      // ];
      // this.decisionTableData = [
      //   {
      //     decision: "4A登录",
      //     decisioncelue: "用户信任等级中：验证码登录",
      //   },
      //   {
      //     decision: "堡垒机登录",
      //     decisioncelue: "用户信任等级高：密码登录",
      //   },
      // ];
    },
    async getTableData(userId) {
      try {
        let params = {
          pageSize: 10,
          pageNum: 0,
          userId,
        };
        const res = await getriskList(params);
        if (res && res.rescode === 200) {
          this.tableData = res.data.dataList || [];
        } else {
          this.tableData.splice(0);
        }
      } catch (error) {
        this.tableData.splice(0);
      }
    },
    async getdecisionTableData(trustLevel) {
      try {
        let params = {
          pageSize: 10,
          pageNum: 0,
          trustLevel,
        };
        const res = await getdecisionList(params);
        console.log(res);
        if (res && res.rescode === 200) {
          this.decisionTableData = res.data.dataList || [];
          console.log(this.decisionTableData);
        } else {
          this.decisionTableData.splice(0);
        }
      } catch (error) {
        this.decisionTableData.splice(0);
      }
    },
    async gettablerizhiData(matchId) {
      console.log(matchId);
      try {
        let params = {
          pageSize: 10,
          pageNum: 0,
          matchId,
        };
        const res = await gettablerizhiDataList(params);
        if (res && res.rescode === 200) {
          this.tablerizhiData = res.data.dataList || [];
        } else {
          this.tablerizhiData.splice(0);
        }
      } catch (error) {
        this.tablerizhiData.splice(0);
      }
    },
    handleClose() {
      this.$emit("update:detailVisible", false);
    },
    handlerizhiClose() {
      this.detailrizhiVisible = false;
    },
    async seeRizhi(val) {
      console.log(val);
      await this.gettablerizhiData(val);
      this.detailrizhiVisible = true;
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
  .el-date-editor.el-input {
    width: 100%;
  }
}
::v-deep .el-button {
  .el-icon-edit + span {
    margin-left: 0px;
  }
  .el-icon-delete + span {
    margin-left: 0px;
  }
}
::v-deep .el-dialog {
  min-width: 640px;
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }
  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
}
.detailDialog {
  .el-dialog {
    min-width: 640px;
  }

  .el-form {
    .el-form-item.slider {
      width: 100%;
    }
    ::v-deep.range {
      width: 100%;
      .el-form-item__content {
        display: flex;
        .timepicker {
          width: 100%;
        }
      }
    }
  }
}
::v-deep .el-dialog {
  min-width: 700px;
  max-width: 1100px;
  .until {
    margin-bottom: 10px;

    .header {
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding-left: 5px;
      font-size: 16px;
      background-color: #e0e0e0;
      background-color: #a8a7a7;
      color: #fff;
      // border-radius: 5px 5px 0 0;
    }
    .cell {
      // border: 1px solid #eee;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .global-info-table-row-wrap {
        width: 50%;

        // flex-basis: 50%;
        // border-bottom: 1px solid #eee;
      }
      .global-info-table-row-wrap {
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
      }
      // .global-info-table-row-wrap:last-child {
      //   border-radius: 0 0 5px 5px;
      // }
    }
    .until:last-child {
      margin-bottom: 0px;
    }
  }

  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }
  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
  .title {
    height: 20px;
    margin-top: 25px;
    display: flex;
    font-size: 16px;
    font-weight: 600;
    // justify-content: center;
    align-items: center;
    div {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #6d6d6d;
      margin-right: 5px;
    }
  }
  .el-table {
    margin-top: 10px !important;
  }
}
.detailrizhiDialog {
  .title {
    margin-top: 0px;
  }
}
</style>
